<template>
  <HeaderPart>新增送货页面</HeaderPart>
  <div class="wrapper">
    <el-form :model="address" label-width="120px" >
      <el-form-item label="联系人:">
        <el-input v-model="address.contactName" placeholder="联系人姓名"/>
      </el-form-item>
      <el-form-item label="性别:">
        <el-radio-group v-model="address.contactSex">
          <el-radio label="男" />
          <el-radio label="女" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="电话:">
        <el-input v-model="address.contactTel" placeholder="输入电话"/>
      </el-form-item>
      <el-form-item label="收货地址:">
        <el-input v-model="address.address" placeholder="输入收货地址"/>
      </el-form-item>
      <el-button type="success" @click="add">新增</el-button>
    </el-form>
  </div>
</template>

<script setup>
import HeaderPart from "@/components/common/HeaderPart";
import {ref} from "vue";
import {addAddress} from "@/utils/api/addressManager";

// 定义address接收变量
const address = ref({
  contactName:'',
  contactTel:'',
  contactSex:'男',
  address:'',
  userId: JSON.parse(localStorage.getItem("userLoginAll")).id
})
const add =async ()=>{
  await addAddress(address.value)
}
</script>

<style scoped>
.wrapper {
  margin: 5rem 2rem;
  height: 80vh;
  /*background-color: #70BC46;*/
}
:deep(.el-form-item__label) {
  width: 75px !important;
}
:deep(.el-button){
  width: 100%;
}
</style>